<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 300px;
        }

        ul li {
            border-bottom: 1px solid #000;
            display: flex;
            justify-content: space-between;
        }

        .header {
            display: flex;
            justify-content: space-between;
            font-size: 20px;
            font-weight: bold;
        }

        ul li  span {
            margin: 0 15px;
        }

        .page-btn {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: #ddd;
            margin: 0 2px;
            text-align: center;
            line-height: 30px;
            border-bottom: none;
        }

        .page-btn.active {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text" @keyup.enter="search" v-model="searchInpValue">
    <ul>
        <li class="header">
            <span>编号</span>
            <span>姓名</span>
            <span>年龄</span>
            <span>操作</span>
        </li>

        <li v-for="(item, index) in filterArr">
            <span>{{item.index}}</span>
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
            <span><button @click="deleteItem(item)">删除</button></span>
        </li>

        <!-- 分页条 -->
        <li
            class="page-btn"
            @click="chengePageIndex(item)"
            :class="{active: pageIndex === item}"
            v-for="(item, index) in total">{{item}}</li>

        <h1>{{total}}</h1>
        <li>
            <button @click="clear">清空</button>
        </li>
    </ul>

    <h1>添加</h1>

    姓名:<input v-model="userName" @keyup.enter="add" type="text">
    年龄:<input v-model="age" @keyup.enter="add" type="text">
    <button @click="add">添加</button>

    <!-- 找bug，解决他 -->
</div>

<script src="../20211018/vue.js"></script>
<script>

    let myApp = new Vue({
        el: '#app',
        data: {
            searchInpValue: '',
            userName: '',
            age: '',
            allArr: [],
            // 当前在第几页
            pageIndex: 1,
            // 每页多少条
            pageSize: 5
        },
        // 当pageIndex变化的时候，从allArr中取分页数据，生成filterArr变量
        // allArr添加数据的时候
        computed: {
            filterArr () {
                let start = (this.pageIndex - 1) * this.pageSize
                let end = this.pageIndex * this.pageSize

                return this.allArr.filter(item => {
                    return item.name.includes(this.searchInpValue)
                }).slice(start, end)
            },
            total () {
                let searchArr = this.allArr.filter(item => {
                    return item.name.includes(this.searchInpValue)
                })

                return Math.ceil(searchArr.length / this.pageSize)
            }
        },
        watch: {
            searchInpValue: {
                handler (newValue, oldValue) {
                    this.pageIndex = 1
                }
            }
        },
        methods: {
            search () {
                this.pageIndex = 1
            },
            chengePageIndex (item) {
                this.pageIndex = item
            },
            add () {
                this.allArr.push({
                    id: new Date().getTime(),
                    index: this.allArr.length + 1,
                    name: this.userName,
                    age: this.age
                })

                this.userName = ''
                this.age = ''
            },
            deleteItem (item) {
                /*
                    {
                        age: ""
                        id: 1634693702001
                        index: 7
                        name: "7"
                    }
                
                */
                console.log(item)
                // 找下标findIndex
                let index = this.allArr.findIndex(allArrItem => {
                    return item.id === allArrItem.id
                })

                console.log(index)
                this.allArr.splice(index, 1)

                if (!this.filterArr.length && this.pageIndex > 1) {
                    this.pageIndex = this.pageIndex - 1
                }
            },
            clear () {
                this.allArr = []

                this.pageIndex = 1
            }
        }
    })
</script>

</body>
</html>